<template>
  <div>
    <div :id="id" class="biao"></div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as echarts from 'echarts'
export default {
  data () {
    return {
      values: []
    }
  },
  name: 'echart',
  props: {
    items: {
      type: Array,
      default: function () {
        return []
      }
    },
    pieName: { // 图标名
      type: String,
      default: '数据'
    },
    pirRad: {
      type: Array,
      default: function () {
        return []
      }

    },
    titleText: {
      type: String,
      default: '自己看着办'
    },

    titleLeft: {
      type: String,
      default: 'center'
    },
    legendShow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    id () {
      return 'each' + this._uid
    }
  },
  mounted () {
    this.items.forEach(item => {
      console.log(item)
    })
    const option = {
      title: {
        text: this.titleText,
        subtext: this.titleSub,
        left: this.titleLeft
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',

        show: this.legendShow
      },
      series: {
        name: this.pieName,
        type: 'pie',
        radius: this.pirRad,
        data: this.items
      }
    }
    const chartObj = echarts.init(document.getElementById(this.id))
    chartObj.setOption(option)
  }

}
</script>

<style scoped>
.biao{
    width: 100%;
    height: 600px;
}
</style>
